<template>
  <div>
    <div class="video-hd">
      <!-- <div>{{ form.ResName }}</div> -->
    </div>
    <div class="read-pdf">
      <van-row class="mt-10">
        <van-col span="8" type="flex" justify="center">
          <div style="text-align: right">
            <van-button size="small" type="default" @click="prePage"
              >上一页</van-button
            >
          </div>
        </van-col>
        <van-col span="8" type="flex" justify="center">
          <div class="mb-10 mt-10" style="text-align: center">
            {{ pageNum }}/{{ pageTotalNum }}
          </div>
        </van-col>
        <van-col span="8" type="flex" justify="center">
          <div style="text-align: left">
            <van-button size="small" type="default" @click="nextPage"
              >下一页</van-button
            >
          </div>
        </van-col>
      </van-row>
      <pdf
        :page="pageNum"
        :src="url"
        ref="pdf"
        @progress="loadedRatio = $event"
        @num-pages="pageTotalNum = $event"
      ></pdf>
    </div>
  </div>
</template>

<script>
import { getAttCode } from "@/api/common";
import { CountDown } from "vant";
import pdf from "vue-pdf";

export default {
  components: { CountDown, pdf },
  props: {
    attcodeIn: {
      type: String,
      required: false,
      default:"",
    },
    urlIn: {
      type: String,
      required: false,
      default:"",
    },
  },
  data() {
    return {
      baseUrl: process.env.VUE_APP_BASE_API,
      pdf: false,
      pageNum: 1,
      pageTotalNum: 1, // 总页数
      loadedRatio: 0,
      numPages: null, // pdf 总页数
      attCode: "",
      url: "",
    };
  },
  created() {
    this.attCode=this.attcodeIn;
    this.url=this.urlIn;
  },
  watch: {
    urlIn: {
      handler(newName, oldName) {
        console.log("urlIn", newName);
        this.url = newName;
        this.attCode = "";
        this.getDetail();
      },
    },
    // attcodeIn: {
    //   handler(newName, oldName) {
    //     console.log("attcodeIn", newName);
    //     this.attCode = newName;
    //     this.url = "";
    //     this.getDetail();
    //   },
    // },
  },
  mounted: function () {
    this.getDetail();
  },
  methods: {
    // 上一页
    prePage() {
      let page = this.pageNum;
      page = page > 1 ? page - 1 : this.pageTotalNum;
      this.pageNum = page;
    },

    // 下一页
    nextPage() {
      let page = this.pageNum;
      page = page < this.pageTotalNum ? page + 1 : 1;
      this.pageNum = page;
    },
    initPdfUrl(path) {
      if (path) {
        if (path.indexOf("http") == -1) {
          this.url = this.baseUrl + path;
          console.log(this.url)
        } else {
          this.url = path;
        }
        console.log("initPdfUrl : "+this.url)
        let loadingTask = pdf.createLoadingTask(this.url);
        loadingTask.promise
          .then((pdf) => {
            this.numPages = pdf.numPages;
            console.log(pdf)
          })
          .catch((err) => {
            console.log(err)
            console.error("pdf 加载失败", err);
          });
      }
    },
    getDetail() {
      console.log("getDetail")
      console.log(this.url)

      if (this.attCode && this.attCode != "") {
        console.log(this.attCode);
        let params = { attCode: this.attCode };
        getAttCode(params).then((res) => {
          this.initPdfUrl(res.data.AttMiddlePath);
        });
      } else if (this.url && this.url != "");
      {
        this.initPdfUrl(this.url);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.video-hd {
  z-index: 99;
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  font-size: 14px;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.5);
}
.video-hd > div {
  display: flex;
  align-items: center;
}
.video {
  width: 100%;
  height: auto;
}
</style>